import styled from "styled-components";

export const Essaywrap = styled.div`
  width: 630px;
  height: 580px;
  margin-top: 30px;
  color: var(--fontsize);
  background-color: var(--essayback) !important;
  transform-origin: 50% 100%;
  transform: scale(0.6);
  transition: all 0.5s ease;
  .imgwrap {
    width: 630px;
    height: 315px;
    overflow: hidden;
    img {
      width: 630px;
      height: 315px;
      display: block;
      cursor: pointer;
      transition: all 0.5s ease;
      &:hover {
        transform: scale(1.3);
      }
    }
  }
  .head {
    width: 90%;
    margin: 10px auto;
    height: 70px;
    & > div {
      font-size: 28px;
      font-weight: 500;
      margin-bottom: 0;
    }
  }
  .content {
    width: 90%;
    height: 100px;
    margin: 10px auto;
  }
  .bottom {
    display: flex;
    width: 90%;
    justify-content: space-between;
    margin: 0 auto;
    & > span {
      color: red;
      cursor: pointer;
      font-size: 15px;
      padding: 6px;
      &:hover {
        background-color: #eeeeee;
        border-radius: 5px;
      }
    }
    & > .right {
      display: flex;
      justify-content: space-around;
      width: 35%;
      & > span {
        display: flex;
        & > span {
          margin-right: 5px;
          font-size: 18px;
          cursor: pointer;
          &.active {
            color: red;
          }
        }
      }
    }
  }
  .active {
    transform: none;
  }
`;
